<template>
	<view class="mypage">
		<dcustom bgColor="bg-gradual-blue" :isBack="true" :isArrow="true">
			<block slot="content">我的</block>
		</dcustom>
		
		<view class="header" >
			<view class="avatar-wrap" @click="updateImg"> 
				<image src="/static/logo.png"> </image>
			</view>
			<view class="admin-wrap" @click="handleAbout('admin')">
				 <view class="text-black text-xl text-bold"> {{ userInfo.REALNAME || '' }}</view>
				 <view class="text-gray margin-top-xs">部门：{{ userInfo.DEPTNAME || '' }}</view>
				 <view class="text-gray">{{ userInfo.ORGNAME ||'' }}</view>
			</view>
			
			<view class="arrow-wrap" @click="handleAbout('admin')">
				<image class="" src="../../static/user/to.png"></image>
			</view>
			
		</view>
		<view class="list-content">
			<view class="list" v-if="isShowPrint">
				<view class="li" @click="handleAbout('print_set')">
					<view class="icon"><image src="../../static/user/ic_main_sybz.png"></image></view>
					<view class="text text-black">打印机设置</view>
					<image class="to" src="../../static/user/to.png"></image>
				</view>
			</view>
			
			<view class="list">
				<view class="li "  @click="handleAbout('help')">
					<view class="icon"><image src="../../static/user/ic_main_sybz.png"></image></view>
					<view class="text">帮助中心</view>
					<image class="to" src="../../static/user/to.png"></image>
				</view>
				<view class="li " @click="handleAbout('about')">
					<view class="icon"><image src="../../static/user/ic_main_guanyuwomen.png"></image></view>
					<view class="text">关于我们</view>
					<image class="to" src="../../static/user/to.png"></image>
				</view>
				
				<view class="li " @click="handleAbout('qrcode')">
					<view class="icon"><image src="../../static/user/ic_main_yijian.png"></image></view>
					<view class="text">下载二维码</view>
					<image class="to" src="../../static/user/to.png"></image>
				</view>
				
			</view>
			<view class="list">	
				<view class="li " @click="handleAbout('change-pwd')">
					<view class="icon" ><image src="../../static/user/ic_main_xiugaimima.png"></image></view>
					<view class="text">密码修改</view>
					<image class="to" src="../../static/user/to.png"></image>
				</view>
				
				<view class="li " @click="handleUpdate">
					<view class="icon" ><image src="../../static/user/ic_main_fenxiang.png"></image></view>
					<view class="text" style="width: 66%;">版本更新</view>
					<view class="c-orange version-code">
					V {{ version || ''}}
					</view>
				</view>
				
				<view class="li noborder" @click="loginOut">
					<view class="icon"><image src="../../static/user/ic_main_qiehuanjuese2.png"></image></view>
					<view class="text">账户切换/退出</view>
					<image class="to" src="../../static/user/to.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { mapState,mapMutations } from 'vuex'
	import api from '../../common/api.js'
	import utils from '../../common/util.js'
	let _self,baseUrl,token,userId ;
	export default {
		computed: mapState(['userInfo']),
		data() {
			return {
				data:{},
				isShowPrint: false ,
				avatarUrl:'',
				// #ifdef APP-PLUS
				version: plus.runtime.version,
				// #endif
			};
		},
		onLoad() {
			_self = this;
			this.getshowPrint()
		},
		onShow() {
			// #ifdef APP-PLUS
			if(plus.os.name != 'iOS'){
				_self.isShowPrint = true
			} 
			// #endif
		},
		methods:{
			handlePrint(){
				uni.navigateTo({
						url: "/pages/tab05/"
				});
			},
			handleWaybill(){
				uni.switchTab({
						url: '/pages/tab02/index'
				});
			},
			handleNotice(e){
				uni.switchTab({
						url: '/pages/tab01/index'
				});
			},
			handleAbout(e){
				uni.navigateTo({
						url: "/pages/tab05/"+e
				});
			},
			loginOut(e){
				// plus.runtime.restart();
				uni.navigateTo({
					url:'/pages/tab05/login'
				})
			},
			
			handleUpdate(){
				this.$utils.handleUpdate(this.userInfo.BaseURL)
			},
			getshowPrint(){
				let URL  = this.userInfo.BaseURL + '/api/SystemCenter/UpdateVersion';
				let a = { VERTYPE: 2 };
				// console.log( URL );
				this.axios({
					url: URL ,
					data: a
				}).then(res=>{
					// console.log(res);
					if(res.Result.length!=0){
						_self.isShowPrint = true
					}
				})
			},
			updateImg(){
				// console.log(userId);
				// _self.formActiveIndex = e ;
				uni.chooseImage({
						count: 1,
						success: (chooseImageRes) => {
								const tempFilePaths = chooseImageRes.tempFilePaths;
								// console.log(tempFilePaths);
								uni.uploadFile({
										url: baseUrl + api.apiPublic.upload ,
										filePath: tempFilePaths[0],
										name: 'file',
										header: { Authorization:'BasicAuth '+token },
										formData: {
												'CurrentUserId': userId
										},
										success: (uploadFileRes) => {
												let res = JSON.parse(uploadFileRes.data)
												if(uploadFileRes.statusCode == 200 && res.IsSuccess){
													_self.avatarUrl = tempFilePaths[0] ;
													// console.log(res);
												}else{
													uni.showToast({title: '上传失败'+uploadFileRes.errMsg ,icon: 'none'});
												}
										}
								});
						}
				});
			}
			
		}

	}
</script>

<style lang="scss">
	
page{
	background-color:#f1f1f1;
	font-size: 30upx;
}

.version-code{
	font-size: 30rpx;
	 
}
.header{
	background: #fff;
	height: 260upx;
	border-bottom:15upx solid  #f1f1f1;
	display:flex;
	align-items:center;
	// padding-bottom: 110upx;
	position: relative;
	font-size: 34rpx;
	.avatar-wrap{
		margin-left: 40upx;
		margin-right: 20upx;
		.margin-top-xs{
			margin-top: 8upx;
		}
	}
	.avatar-wrap image{
		width: 120upx;
		height: 120upx;
		border-radius: 10upx;
	}
	.arrow-wrap{
		position: absolute;
		right:4%;
		top: 48%;
	}
	.arrow-wrap image{
		width: 30upx;
		height: 30upx;
	}
}
.box{
	width: 650upx;
	height: 280upx;
	border-radius: 20upx;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 5upx 20upx 0upx rgba(0, 0, 150, .2); 
	.box-hd{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		.avator{
			width: 160upx;
			height: 160upx;
			background: #fff;
			border: 5upx solid #fff;
			border-radius: 50%;
			margin-top: -80upx;
			overflow: hidden;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.phone-number{
			width: 100%;
			text-align: center;
		}
	}
	.box-bd{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: center;
		.item{
			flex: 1 1 auto;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: center;
			border-right: 1px solid #f1f1f1;
			margin: 15upx 0;
			&:last-child{
				border: none;
			}
			.icon{
				width: 60upx;
				height: 60upx;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.text{
				width: 100%;
				text-align: center;
				margin-top: 10upx;
				color: black;
			}
		}
	}
}
.list-content{
	background: #fff;
}
.list{
	width:100%;
	border-bottom:15upx solid  #f1f1f1;
	background: #fff;
	&:last-child{
		border: none;
	}
	.li{
		width:100%;
		height:100upx;
		padding:0 4%;
		border-bottom:1px solid rgb(243,243,243);
		display:flex;
		align-items:center;
	&.noborder{
		border-bottom:0
		}
		.icon{
			flex-shrink:0;
			width:70upx;
			height:70upx;
			image{
				width:70upx;
				height:70upx;
			}
		}
		.text{
			padding-left:20upx;
			width:100%;
			color:#101010;
			font-size: 34rpx;
		}
		.to{
			flex-shrink:0;
			width:30upx;
			height:30upx;
		}
	}
}
</style>
